﻿<%@ Page Title="" Language="C#" MasterPageFile="~/member/mMenber.master" AutoEventWireup="true" CodeBehind="ItemCate.aspx.cs" Inherits="map.member.ItemCate" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head2" runat="server">
<link href="../outstyle.css" rel="stylesheet" type="text/css" />
<script src="../js/dropdowncontent.js" type="text/javascript"></script>
    <style type ="text/css" >
        .itemHeaderDiv
       {
           background:url(../img/upItem.gif) no-repeat;
           padding-left:60px;
           padding-top:10px;
           height:40px;
           vertical-align:middle;
       } 
       .itemHeaderDiv span
       {
           font-size:x-large;
           color:Red;
       }
        fieldset  
        {           
            width:85%;
            text-align:center; 
        }
        fieldset div
        {
                   
            background-color:#E5F0FF;
        }
        .searchDiv
        {
            height:60px;
            vertical-align:middle ;
            padding-top:20px;        
        }
        .searchlabel
        {
            font-size:large ;
            font-weight:bold;
        }
        .recentlyDiv
        {
            padding:5px 0px 5px 0px;
            vertical-align:middle ;
        }
        .cateSelectDiv
        {
            padding:5px 10px 5px 10px;
            text-align:left;
        }
        .currentSelectDiv
        {
            width:85%;
            padding:5px 0px 5px 0px;
            border:solid 1px #FEDBAB;
            background-color:#FFFAF2;
        }
        .cateSelectDiv  select
        {
            width:150px;
        }
        .cateSelectUl
        {
            list-style-type:none;
        }
        .cateSelectUl li
        {
            display:inline;
            padding-left:10px;
        }
        #currentSelectSpan a
        {
            color :Blue ;
        }
        .uploadItemDiv
        {
            vertical-align:middle;
            padding:15px 0px 5px 0px;
            padding-left:35%;
        }
        .cateSearchDiv
        {
            display:none;
            padding:5px 0px 5px 0px;
            text-align:left; 
            width:100%;           
        }
        #cateSearchUl
        {
            list-style-type:none ;
            background-color:White ;
            margin:0px 0px 0px 0px;
            padding:0px 0px 0px 10px;
            background-color:white;
        }
        #cateSearchUl li
        {
            list-style-type:none ; 
            cursor:pointer;
        }
        
        #cancelSearchUl
        {
            list-style-type :none;
            margin:0px 0px 0px 0px ;
            padding:0px 0px 0px 10px;
        }
        #cancelSearchUl li
        {
            display:inline ;
            list-style-type:none ;
            background:url(../img/tagleft.gif) no-repeat  left top;
            float:left;
            height:20px;
        }
        #cancelSearchUl li a
        {
            background:url(../img/tagright.gif) no-repeat  right top;
            float:left;
            padding-left:10px;
            padding-right:10px;
            line-height :20px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder3" runat="server">
    <div class="itemHeaderDiv">
            <h2><span>发布宝贝</span></h2>             
    </div> <br />
    
    <h2>选择宝贝所属类目：</h2>  <br />
    <fieldset >
        <legend ></legend>
        <div  class ="searchDiv">
            <img alt =""  src ="../img/glass.gif"/>
            <label class ="searchlabel" for="searchCateText">类目搜索</label>
            <input  type="text"  value="" id="searchCateText"  style="width:50%; "/>            
            <input  type="button" value="搜索" style="width:80px;" onclick ="searchItem();"/>  <br />
            <span style =" width:100% ;  vertical-align:bottom ; color:Gray; padding-top:5px;">请输入商品名称或类目属性名称，快速找到正确类目。数码产品输入型号即可。</span>
        </div>
    </fieldset>
    
    <div class="recentlyDiv">
        &nbsp;<label >您经常选择的类目：</label>
        <select id="recentlyCateSelect" style=" width:40%;"  onchange ="recentlyCateSelectChanged(this);">
            <option value ="">请选择</option>
        </select>
    </div>
    
    <fieldset >
        <legend>
        </legend>
        <div  class ="cateSelectDiv" id="cateSelectDiv">
            <ul class ="cateSelectUl">
                <li  style=" display:inline;">
                    <select id="cateselect0" onchange ="cateSelectChanged(this,0);">
                        <option value="">请选择</option>
                    </select>
                </li>
                <li style=" display:none;" >
                    <select id="cateselect1" onchange ="cateSelectChanged(this,1);">
                        <option value="">请选择</option>
                    </select>
                </li>
                <li style=" display:none;" >
                    <select id="cateselect2" onchange ="cateSelectChanged(this,2);">
                        <option value="">请选择</option>
                    </select>
                </li>
                <li style=" display:none;" >
                    <select id="cateselect3" onchange ="cateSelectChanged(this,3);">
                        <option value="">请选择</option>
                    </select>
                </li>
            </ul>
        </div>
        <div class ="cateSearchDiv" id="cateSearchDiv"  style =" display:none">
            <ul id="cancelSearchUl">
                <li><a onclick ="showSelectDiv(false);">取消<img  alt ="关闭" style =" padding-left:10px;" src ="../img/closes.png" /></a></li>
            </ul>   <br /><br />
            <div>
            <ul id="cateSearchUl">
            </ul>
            </div>
        </div>
    </fieldset> <br />
    
    <div class ="currentSelectDiv">
        &nbsp;<label>您当前的选择是：</label> <span id="currentSelectSpan"></span>
    </div>
    
    <div class="uploadItemDiv">
        <input  id="uploadItemButton" disabled ="true" type ="button" style ="height:30px;width:150px;" value="好了，去发布宝贝" onclick ="UploadItem();"/>
    </div>
    
    <div id="proccessDiv" style =" display:none"> 
        
    </div>
    <input  type ="hidden" value ="" id="selectCateIds"/>

    
    <script type ="text/javascript" >
        var RecentlyCateListCookieName = "RecentlyCateList";
        //联级下拉框当前选项发生改变
        function cateSelectChanged(thisObj, level) {
            for (var i = level+1; i < 4; i++) {
                var cateselId = "cateselect" + i.toString();
                var cateselEle = document.getElementById(cateselId);
                clearSelect(cateselEle);
            }
            if (level < 3) {
                var cateselId = "cateselect" + (level+1).toString();
                var currentCateId = thisObj[thisObj.selectedIndex].value;
                if (currentCateId != "" )
                    initCateSelects(cateselId, currentCateId);
                else {
                    if (level == 0) {
                        initCateSelects("cateselect0", "");
                    }
                    else {
                        var parentCateSelId = "cateselect" + (level - 1).toString();
                        var parentCateSelEle = document.getElementById(parentCateSelId);
                        initCateSelects(thisObj.id, parentCateSelEle[parentCateSelEle.selectedIndex].value);
                    }
                }
                
            }
        }
        //输入框 按键事件
        function searchCateTextKeyDown(o) {
            o = o || window.event;
            if (o.keyCode == "13") {
                searchItem();
                o.keyCode = "0";
                return false;
            }
        }

        //经常使用的分类 下拉框 选项发生改变
        function recentlyCateSelectChanged(thisObj) {
            var currentSelectCateIdStr = thisObj[thisObj.selectedIndex].value;
            var selectedCateIdArgs = currentSelectCateIdStr.split(">>");
            initCateSelectsByList(selectedCateIdArgs);

        }

        function initCateSelectsByList(selectedCateIdArgs) {            
            for (var i = 0; i < selectedCateIdArgs.length; i++) {
                var selectCateEle = document.getElementById("cateselect" + i.toString());
                for (var j = 0; j < selectCateEle.length; j++) {
                    if (selectCateEle[j].value == selectedCateIdArgs[i]) {
                        selectCateEle.selectedIndex = j;
                        break;
                    }
                }
                cateSelectChanged(selectCateEle, i);
            }
        }
        //初始化 联级下拉框
        function initCateSelects(cateSelId,parentCateId) {
            var allCateString = AjaxFunction.GetItemCate(parentCateId).value;
            var allCateList = eval(allCateString);
            var catesel0 = document.getElementById(cateSelId);
            clearSelect(catesel0);
            
            var hasChild = false;             
            if (allCateList!=null && allCateList.length != null) {
                if (allCateList.length > 0) {
                    catesel0.parentNode.style.display = "inline";
                    hasChild = true;
                }
                for (var i = 0; i < allCateList.length; i++) {
                    var optionEle = document.createElement("option");
                    optionEle.value = allCateList[i].id;
                    optionEle.innerHTML = allCateList[i].name;
                    catesel0.appendChild(optionEle);
                }
            }
            var allselectedCateIdlist = getSelectedCateIdList();
            if (allselectedCateIdlist.length > 0) {
                var index = 0;
                var currentSelHtml = "";
                for (var i = 0; i < allselectedCateIdlist.length; i++) {
                    if (index++ > 0) {
                        currentSelHtml += "&nbsp;>&nbsp;";
                    }
                    currentSelHtml += "<a>" + allselectedCateIdlist[i][1] + "</a>";
                }
                if (hasChild == true)
                    currentSelHtml += "&nbsp;>&nbsp;...";
                else {
                    
                }

                document.getElementById("currentSelectSpan").innerHTML = currentSelHtml;
                document.getElementById("uploadItemButton").disabled = false;
            } 
            else {
                document.getElementById("uploadItemButton").disabled = true;
                document.getElementById("currentSelectSpan").innerHTML = "";
            }
        }
        //清除下拉框
        function clearSelect(selectEle) {
            selectEle.innerHTML = "";
            var optionEle = document.createElement("option");
            optionEle.value = "";
            optionEle.innerHTML = "请选择";
            selectEle.appendChild(optionEle); 
            selectEle.parentNode.style.display = "none";
        }
        //获取当前联级下拉框所选择的 分类
        function getSelectedCateIdList() {
            var selectedCateArray = new Array();
            var catesearchdiv = document.getElementById("cateSearchDiv");
            if (catesearchdiv.style.display != "none") {
                if (document.getElementById("currentSelectSpan").innerHTML != "") {
                    return searchIdNameList;
                }
            }
            else {
                for (var i = 0; i < 4; i++) {
                    var cateselId = "cateselect" + i.toString();
                    var cateselEle = document.getElementById(cateselId);
                    if (cateselEle.parentNode.style.display == "none")
                        break;
                    else {
                        var selectedCateId = cateselEle[cateselEle.selectedIndex].value;
                        var selectedCateName = cateselEle[cateselEle.selectedIndex].innerHTML;
                        if (selectedCateId != "" && selectedCateId != null)
                            selectedCateArray.push([selectedCateId, selectedCateName]);
                    }
                } 
            }
            return selectedCateArray;
        }

        var recentlySelectCateList ;
        window.onload = function() {
            document.getElementById("searchCateText").onkeydown = searchCateTextKeyDown;
            initCateSelects("cateselect0", "");
            //setCookie(RecentlyCateListCookieName ,"");
            //初始化经常用的分类
            var recentlySelCatStr = getCookie("f980",RecentlyCateListCookieName);
            if (recentlySelCatStr != "") {
                recentlySelectCateList = eval(recentlySelCatStr);
                if (recentlySelectCateList.length > 0) {
                    var recentlyCateSelEle = document.getElementById("recentlyCateSelect");
                    clearSelect(recentlyCateSelEle); recentlyCateSelEle.parentNode.style.display = "block";
                    for (var i = 0; i < recentlySelectCateList.length; i++) {
                        var optionEle = document.createElement("option");
                        optionEle.value = recentlySelectCateList[i].value;
                        optionEle.innerHTML = recentlySelectCateList[i].text;
                        recentlyCateSelEle.appendChild(optionEle);
                    }
                }
            }

            var cateIds = getQueryString("cate");
            if (cateIds != "") {
                var cateArgs = cateIds.split("_");
                if (cateArgs.length > 0)
                    initCateSelectsByList(cateArgs);
            }
            var infotype = getQueryString("type"); //"edit"; //
            var itemid = getQueryString("id"); //"a5fc77bc6c841afb68cd726217e374f7"; //
            var uploadItembutton = document.getElementById("uploadItemButton");
                        
            if (infotype == "edit") {
                uploadItembutton = "好了，保存！";
            }
            else{
                uploadItembutton = "好了，去发布宝贝！";
            }
            
        }

        //上传宝贝
        function UploadItem() {
            saveRecentlySelectedCate();
            var currentCateSelectIds = document.getElementById("selectCateIds").value;

            var infotype = getQueryString("type"); //"edit"; //
            var itemid = getQueryString("id"); //"a5fc77bc6c841afb68cd726217e374f7"; //

            //window.location.href = "ItemInfo.aspx?cate=" + currentCateSelectIds;
            if (infotype == "edit") {
                window.location.href ="ItemInfo.aspx?cate=" + currentCateSelectIds+ "&type=edit&id="+itemid ;
            }
            else {
                window.location.href ="ItemInfo.aspx?cate=" + currentCateSelectIds+ "&type=new";
            }
        }
        //搜索类目
        var searchIdNameList = new Array();;
        var searchResultArray = new Array();
        function searchItem() {
            var cateKeys = document.getElementById("searchCateText").value;
            if (cateKeys == "") {
                alert("关键字不能为空！");
                return;
            }
            searchResultArray = new Array();
            searchIdNameList = new Array();
            showSelectDiv(true);
            var catesearchul = document.getElementById("cateSearchUl");
            var searchResult = AjaxFunction.SearchItemCate(cateKeys).value;
            catesearchul.innerHTML = "";
            if (searchResult == "") {
                var liEle = document.createElement("li");
                liEle.innerHTML = "对不起，没有找到您需要的类目！";
                catesearchul.appendChild(liEle);
            }
            else {
                var searchCateList = eval(searchResult);
                if (searchCateList != null && searchCateList.length > 0) {
                    for (var i = 0; i < searchCateList.length; i++) {
                        var ids = "";
                        var names = "";
                        var htmls = "";
                        var jcount = 0;
                        for (var j = 0; j < searchCateList[i].ids.length; j++) {
                            if (jcount++ > 0) {
                                ids += "_";
                                names += ">";
                                htmls += " > ";
                            }
                            ids += searchCateList[i].ids[j];
                            names += searchCateList[i].names[j];
                            htmls += "<a>" + searchCateList[i].names[j] + " </a>";                            
                        }
                        searchResultArray.push(htmls);
                        var liEle = document.createElement("li");
                        liEle.innerHTML = names;
                        liEle.id = ids;
                        liEle.onmouseover = function(o) {
                            o = o || window.event;
                            var target = o.srcElement || o.target;
                            if (target.className != "selected")
                            {
                                target.style.backgroundColor = "lightGray";
                            } 
                        }
                        liEle.onmouseout = function(o) {
                            o = o || window.event;
                            var target = o.srcElement || o.target;
                            if (target.className != "selected")
                            {
                                target.style.backgroundColor = "white";
                            } 
                        }
                        liEle.onclick = function(o) {
                            o = o || window.event;
                            var target = o.srcElement || o.target;
                            var parentUl = target.parentNode;
                            var liList = parentUl.getElementsByTagName("li");
                            var index = -1;
                            for (var i = 0; i < liList.length; i++) {
                                liList[i].style.backgroundColor = "white";
                                liList[i].style.border = "";
                                liList[i].className = "";
                                if (liList[i] == target)
                                    index = i;
                            }
                            target.style.border = "solid 1px #4D95EB";
                            target.style.backgroundColor = "lightBlue";
                            target.className = "selected";
                            document.getElementById("uploadItemButton").disabled = false;
                            document.getElementById("currentSelectSpan").innerHTML = searchResultArray[index];
                            var liIdArgs = target.id.split("_");
                            var liNameArgs = target.innerText.split(">");
                            searchIdNameList = new Array();
                            for (var i = 0; i < liIdArgs.length; i++)
                                searchIdNameList.push([liIdArgs[i],liNameArgs [i]]);
                        }
                        catesearchul.appendChild(liEle);
                    }
                }
            } 
        }

        function showSelectDiv(isSearch) {
            var cateselectdiv = document.getElementById("cateSelectDiv");
            var catesearchul = document.getElementById("cateSearchUl");
            var catesearchdiv = document.getElementById("cateSearchDiv");
            catesearchdiv.style.display = (isSearch ==true )?"block":"none";
            cateselectdiv.style.display = (isSearch == false) ? "block" : "none";

            if (isSearch == false) {
                document.getElementById("uploadItemButton").disabled = true;
                document.getElementById("currentSelectSpan").innerHTML = "";
                initCateSelects("cateselect0", "");
                catesearchdiv.style.height = "200px";
                catesearchdiv.style.overflow = "auto";
            }
            else {
                catesearchdiv.style.height = "";
                catesearchdiv.style.overflow = "auto";
            }
        }

        //保存当前选择的分类
        function saveRecentlySelectedCate() {

            var recentlyCateSelEle = document.getElementById("recentlyCateSelect");
            var allselectedCateIdlist = getSelectedCateIdList();
            var currentSelectedIds = "";
            if (allselectedCateIdlist.length > 0) {
                var allSelStr = "";
                var allSelIdStr = "";
                var index = 0;
                for (var i = 0; i < allselectedCateIdlist.length; i++) {
                    if (index++ > 0) {
                        allSelStr += ">>";
                        allSelIdStr += ">>";
                        currentSelectedIds += "_";
                    }
                    allSelStr += allselectedCateIdlist[i][1];
                    allSelIdStr += allselectedCateIdlist[i][0];
                    currentSelectedIds += allselectedCateIdlist[i][0];
                }
                var found = false;
                for (var i = 0; i < recentlyCateSelEle.length; i++) {
                    if (recentlyCateSelEle[i].innerText == allSelStr) {
                        found = true;
                        break;
                    }
                }
                if (found == false) {
                    var optionEle = document.createElement("option");
                    optionEle.innerHTML = allSelStr;
                    optionEle.value = allSelIdStr;
                    recentlyCateSelEle.appendChild(optionEle);
                }
            }
            //保存当前 选中的类目的ID列表
            if (currentSelectedIds != "")
                document.getElementById("selectCateIds").value = currentSelectedIds;

            var recentlySelCookieValue = "{[";
            var ind = 0;
            for (var i = 0; i < recentlyCateSelEle.length; i++) {
                if (recentlyCateSelEle[i].value != "") {
                    if (ind++ > 0)
                        recentlySelCookieValue += ",";
                    recentlySelCookieValue += "{text:'" + recentlyCateSelEle[i].innerText + "',value:'" + recentlyCateSelEle[i].value + "'}";
                } 
            }
            recentlySelCookieValue += "]}";
            setCookie("f980",RecentlyCateListCookieName,recentlySelCookieValue);
        }
        
//        function  getCookie(Name) {
//            var re = new RegExp(Name + "=[^;]+", "i"); //construct RE to search for target name/value pair
//            if (document.cookie.match(re)) //if cookie found
//                return document.cookie.match(re)[0].split("=")[1] //return its value
//            return ""
//        }
//        function setCookie(name, value){
//	        document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
//	    }
	    
        function isIE() { //ie? 
            if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 1)
                return true;
            else
                return false;
        }

        if (!isIE()) { //firefox innerText define
            HTMLElement.prototype.__defineGetter__("innerText",
            function() {
                var anyString = "";
                var childS = this.childNodes;
                for (var i = 0; i < childS.length; i++) {

                    if (childS[i].nodeType == 1)
                    //anyString += childS[i].tagName=="BR" ? "\n" : childS[i].innerText;
                        anyString += childS[i].innerText;
                    else if (childS[i].nodeType == 3)
                        anyString += childS[i].nodeValue;
                }
                return anyString;
            }
            );


            HTMLElement.prototype.__defineSetter__("innerText",
            function(sText) {
                this.textContent = sText;


            }
            );
        }
        function getQueryString(queryName) {
            var queryValue = "";
            var queryFound = false;
            if (window.location.search != "") {
                var search = window.location.search;
                var i = 0;
                while (i <= search.length) {
                    start = i;
                    end = start + queryName.length;
                    if (search.substring(start, end) == queryName) {
                        queryFound = true;
                        break;
                    }
                    i++;
                }
                if (queryFound) {
                    start = end + 1;
                    end = search.indexOf("&", start);
                    if (end < start)
                        end = search.length;
                    var getvalue = search.substring(start, end);
                    return unescape(getvalue);
                }
            }
            return queryValue;
        }
        
    </script>
</asp:Content>
